<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/jquery.js"></script>
</head>

<body>
    <button class="xhrGet">
        使用get发起不带参数的请求
    </button>
    <button class="xhrGetData">
        使用get发起带参数的请求
    </button>
    <button class="xhrPostData">
        使用post发起请求
    </button>
    <button class="xhrAjaxGet">
        使用ajax发起请求
    </button>
    <button class="xhrAjaxPost">
        使用ajax发起请求
    </button>
    <button class="aa">
        使用ajax删除数据
    </button>
    <script>
        $(function () {
            // 使用get发起不带参数的请求
            // $(".xhrGet").on("click", function () {
            //     $.get("http://www.liulongbin.top:3006/api/getbooks", res => console.log(res))
            // })
            // 使用get发起带参数的请求
            $(".xhrGetData").on("click", function () {
                $.get("http://www.liulongbin.top:3006/api/getbooks", { id: 1 }, res => console.log(res))
            })
            // ------------------------------------
            // 使用post发起带参数的请求
            $(".xhrPostData").on("click", function () {
                $.post("http://www.liulongbin.top:3006/api/addbook", { bookname: "三国演义", author: "吴承恩", publisher: "北京出版社" }, res => {
                    console.log(res);
                })
            })
            // -------------------------------------------
            // 利用ajax发送get请求
            $(".xhrAjaxGet").on("click", function () {
                $.ajax({
                    method: "get",
                    url: "http://www.liulongbin.top:3006/api/getbooks",
                    data: { id: 2 },
                    success: ""
                })
            })
            // 利用ajax发送post请求
            $(".xhrAjaxPost").on("click", function () {
                $.ajax({
                    method: "post",
                    url: "http://www.liulongbin.top:3006/api/addbook",
                    data: { bookname: "红楼梦1", author: "曹雪芹1", publisher: "南京出版社" },
                    success: (res) => {
                        console.log(res);
                    },
                    error: () => {
                        console.log("添加失败,都调用该函数");
                    },
                    complete: () => {
                        console.log("不论成功还是失败，都调用该函数");
                    },
                })
            })
            // 利用ajax删除数据
            $(".aa").on("click", function () {
                $.ajax({
                    method: "get",
                    url: "http://www.liulongbin.top:3006/api/delbook",
                    data: { id: 1 },
                    success: (res) => {
                        console.log(res);
                    }
                })
            })

        })
    </script>
</body>

</html>